<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flow Plot</title>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js"
      integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css"
      integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <style type="text/css">
      body {
        font-family: verdana;
        margin: 0;
        padding: 0;
      }
      .container {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      #mynetwork {
        flex-grow: 1;
        width: 100%;
        height: 750px;
        background-color: #ffffff;
      }
      .card {
        border: none;
      }
      .legend-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        background-color: #f8f9fa;
        position: fixed; /* Make the legend fixed */
        bottom: 0; /* Position it at the bottom */
        width: 100%; /* Make it span the full width */
      }
      .legend-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
      }
      .legend-color-box {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
      .logo {
        height: 50px;
        margin-right: 20px;
      }
      .legend-dashed {
        border-bottom: 2px dashed #666666;
        width: 20px;
        height: 0;
        margin-right: 5px;
      }
      .legend-solid {
        border-bottom: 2px solid #666666;
        width: 20px;
        height: 0;
        margin-right: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="card" style="width: 100%">
        <div id="mynetwork" class="card-body"></div>
      </div>
      <div class="legend-container">
        <img
          src=""
          alt="CrewAI logo"
          class="logo"
        />
        
            <div class="legend-item">
            <div class="legend-color-box" style="background-color: #FF5A50; border-radius: 5px;"></div>
            <div>Start Method</div>
            </div>
            
            <div class="legend-item">
            <div class="legend-color-box" style="background-color: #333333; border-radius: 5px;"></div>
            <div>Method</div>
            </div>
            
            <div class="legend-item">
            <div class="legend-color-box" style="background-color: #FFFFFF; border: 2px solid #FF5A50; border-radius: 5px;"></div>
            <div>Crew Method</div>
            </div>
            
            <div class="legend-item">
            <div class="legend-color-box" style="background-color: #333333; border: 2px dashed #FF5A50; border-radius: 5px;"></div>
            <div>Router</div>
            </div>
            
            <div class="legend-item">
            <div class="legend-solid" style="border-bottom: 2px solid #666666; border-radius: 5px;"></div>
            <div>Trigger</div>
            </div>
            
            <div class="legend-item">
            <div class="legend-dashed" style="border-bottom: 2px dashed #666666; border-radius: 5px;"></div>
            <div>AND Trigger</div>
            </div>
            
            <div class="legend-item">
            <div class="legend-dashed" style="border-bottom: 2px dashed #FF5A50; border-radius: 5px;"></div>
            <div>Router Trigger</div>
            </div>
            
      </div>
    </div>
    
        <div class="card" style="width: 100%">
            
            
            <div id="mynetwork" class="card-body"></div>
        </div>

        
        

        <script type="text/javascript">

              // initialize global variables.
              var edges;
              var nodes;
              var allNodes;
              var allEdges;
              var nodeColors;
              var originalNodes;
              var network;
              var container;
              var options, data;
              var filter = {
                  item : '',
                  property : '',
                  value : []
              };

              

              

              // This method is responsible for drawing the graph, returns the drawn network
              function drawGraph() {
                  var container = document.getElementById('mynetwork');

                  

                  // parsing and collecting nodes and edges from the python
                  nodes = new vis.DataSet([{"color": "#FF5A50", "fixed": true, "font": {"color": "#FFFFFF", "multi": "html"}, "id": "rewrite_question", "label": "Rewrite Question", "margin": {"bottom": 8, "left": 10, "right": 10, "top": 10}, "physics": false, "shape": "box", "x": 0.0, "y": 0}, {"color": "#333333", "fixed": true, "font": {"color": "#FFFFFF", "multi": "html"}, "id": "answer_question", "label": "Answer Question", "margin": {"bottom": 8, "left": 10, "right": 10, "top": 10}, "physics": false, "shape": "box", "x": 0.0, "y": 150}]);
                  edges = new vis.DataSet([{"arrows": "to", "color": "#666666", "dashes": false, "from": "rewrite_question", "smooth": false, "to": "answer_question", "width": 2}]);

                  nodeColors = {};
                  allNodes = nodes.get({ returnType: "Object" });
                  for (nodeId in allNodes) {
                    nodeColors[nodeId] = allNodes[nodeId].color;
                  }
                  allEdges = edges.get({ returnType: "Object" });
                  // adding nodes and edges to the graph
                  data = {nodes: nodes, edges: edges};

                  var options = {"nodes": {"font": {"multi": "html"}}, "physics": {"enabled": false}};

                  


                  

                  network = new vis.Network(container, data, options);

                  

                  

                  


                  

                  return network;

              }
              drawGraph();
        </script>
    
  </body>
</html>
